<template>
  <div>
    <hierarchicaldatasource
      :ref="dataSourceOptions.ref"
      :transport-read-url="dataSourceOptions.transport.readUrl"
      :transport-read-type="'POST'"
      :transport-read-data-type="dataSourceOptions.transport.readDataType"
      :transport-parameter-map="parameterMap"
      :schema-model-id="dataSourceOptions.shcema.model.id"
      :schema-model-has-children="dataSourceOptions.shcema.model.hasChildren"
      :schema-data="dataSourceOptions.shcema.data"
    />
    <treeview
      :id="componentOptions.id"
      :ref="componentOptions.ref"
      :data-source-ref="dataSourceOptions.ref"
      :data-text-field="componentOptions.data.fieldName"
      :change="componentOptions.event.onChange"
      :check="componentOptions.event.onCheck"
      :data-bound="componentOptions.event.onDataBound"
      :drag="componentOptions.event.onDrag"
      :drag-start="componentOptions.event.onDragStart"
      :drag-end="componentOptions.event.onDragEnd"
      :drop="componentOptions.event.onDrop"
      :expand="componentOptions.event.onExpand"
      :collapse="componentOptions.event.onCollapse"
      :load-on-demand="componentOptions.loadOnDemand"
      :navigate="componentOptions.event.onNavigate"
      :select="componentOptions.event.onSelect"
      style="padding:10px"
    />
  </div>
</template>

<script>
  import { HierarchicalDataSource } from '@progress/kendo-datasource-vue-wrapper'
  import { TreeView } from '@progress/kendo-treeview-vue-wrapper'
  export default {
    name: 'KendoTreeCmpt',
    components: {
      'treeview': TreeView,
      'hierarchicaldatasource': HierarchicalDataSource
    },
    props: {
      componentOptions: {
        type: Object,
        default() {
          return {}
        }
      },
      dataSourceOptions: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data: function() {
      return {

      }
    },
    mounted() {

    },
    methods: {
      isEmpty(str) {
        if (str == null || typeof str === 'undefined' || str === '') {
          return true
        }
        return false
      },
      parameterMap(options, operation) {
        if (operation !== 'read' && options.models) {
          // eslint-disable-next-line no-undef
          return { models: kendo.stringify(options.models) }
        } else {
          const parameterMap = Object.assign(this.dataSourceOptions.parameterMap, options)
          // eslint-disable-next-line no-undef
          return kendo.stringify(parameterMap)
        }
      },
      transportReadTree() {
        var tree = this.$refs[this.componentOptions.ref].kendoWidget()
        tree.dataSource.read()
      }
    }

  }
</script>

<style>
   .k-sprite {
        background-image: url("~@/Images/coloricons-sprite.png");
    }
    .rootfolder { background-position: 0 0; }
    .folder     { background-position: 0 -16px; }
    .pdf        { background-position: 0 -32px; }
    .html       { background-position: 0 -48px; }
    .image      { background-position: 0 -64px; }
</style>
